<template>
	<!-- 总容器 -->
	<div class="wrapper">
		<!--header-->
		<header>
			<div class="back" @click="goBack">
				<p>&lt;</p>
			</div>
			<p>个人中心</p>
		</header>

		<div class="cont">
			<!--头像与昵称-->
			<div class="userName" v-if="this.isLogin">
				<img src="../assets/userImg/touxiang2.png">
				<div class="location-text">
					<div class="name">
						你好,{{user.userName}}
					</div>
					<div class="phone">
						{{user.userId}}
					</div>
				</div>
			</div>
			<div class="unlogin" v-if="!this.isLogin" @click="toLogin">
				<h3>请点此登录 ></h3>
			</div>
			<!--list1-->
			<ul class="userinfo">
				<li>
					<img src="../assets/userMenuImg/cart.png">
					<p>购物车</p>
				</li>
				<li>
					<img src="../assets/userMenuImg/Store1.png">
					<p>收藏</p>
				</li>
				<li>
					<img src="../assets/userMenuImg/zuji1.png">
					<p>足迹</p>
				</li>
				<li>
					<img src="../assets/userMenuImg/qianbao1.png">
					<p>红包卡券</p>
				</li>
			</ul>
			<!--myorders-->
			<ul class="myOrders">
				<p>
					我的订单
					<p2>
						全部订单 <i class="fa fa-angle-right"></i>
					</p2>
				</p>
			</ul>
			<ul class="myOrders">
				<div class="icons">
					<li>
						<img src="../assets/userMenuImg/qianbao2.png">
						<p>待付款</p>
					</li>
					<li>
						<img src="../assets/userMenuImg/huoche.png">
						<p>待收货</p>
					</li>
					<li>
						<img src="../assets/userMenuImg/shizhong.png">
						<p>待使用</p>
					</li>
					<li>
						<img src="../assets/userMenuImg/pinglun.png">
						<p>待评价</p>
					</li>
					<li>
						<img src="../assets/userMenuImg/tuikuan.png">
						<p>退款售后</p>
					</li>
				</div>
			</ul>
			
			<!--我的钱包-->
			<div class="myPayBag">
				<div class="title">
					<p>我的钱包</p>
				</div>
				<ul class="payBagDT">
					<li v-if="isLogin">
						<div class="shuju">
							<h3>{{this.userP}}</h3>
							<p>个</p>
						</div>
						<p>我的积分</p>
					</li>
					<li v-if="!isLogin">
						<div class="shuju">
							<h3>0</h3>
							<p>个</p>
						</div>
						<p>我的积分</p>
					</li>
					<li>
						<div class="shuju">
							<h3 v-if="isLogin">20</h3>
							<h3 v-if="!isLogin">0</h3>
							<p>元</p>
						</div>
						<p>专享优惠</p>
					</li>
					<li>
						<div class="shuju">
							<h3 v-if="isLogin">120</h3>
							<h3 v-if="!isLogin">0</h3>
							<p>元</p>
						</div>
						<p>外卖红包</p>
					</li>
					<li>
						<div class="shuju">
							<h3 v-if="isLogin">3</h3>
							<h3 v-if="!isLogin">0</h3>
							<p>个</p>
						</div>
						<p>本月特权</p>
					</li>
				</ul>
			</div>
			
		</div>
		
		<div class="userSet" v-if="this.isLogin">
		<div class="userST">
			<div class="title">
				<p>账户管理</p>
			</div>
			<ul class="userSTDT">
				<li @click="toAddress()">
					<img src="../assets/userMenuImg/dizhi.png">
					<p>我的地址</p>
				</li>
				<li>
					<img src="../assets/userMenuImg/yinsi.png">
					<p>隐私管理</p>
				</li>
				<li>
					<img src="../assets/userMenuImg/xinxi.png">
					<p>修改密码</p>
				</li>
				<li @click="logout()">
					<img src="../assets/userMenuImg/tuichu.png">
					<p>退出登录</p>
				</li>
			</ul>
		</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';
	export default {
		name: 'UserMenu',
		components: {
			Footer
		},
		data() {
			return {
				userP:0,
				user: {},
				businessId: 10001,
				isLogin: false
			}
		},
		//组件初始化信息
		created() {
			this.user = this.$getSessionStorage('user');
			if (this.user != null) {
				this.isLogin = true;
			}
			if(this.isLogin){this.$axios.post('PointController/getPointById',this.$qs.stringify({
				userId:this.user.userId
			})).then(response=>{
				this.userP = response.data;
			}).catch(error=>{
				console.error(error);
			});}
			
		},
		methods: {
			goBack() {
				this.$router.go(-1);
			},
			toLogin() {
				this.$router.push('/login');
			},
			toAddress() {
				if (!this.isLogin) {
					alert('请先登录！');
					return;
				}
				this.$router.push({
					path: '/userAddress',
					query: {
						businessId: this.businessId
					}
				});
			},
			logout() {
				if (!confirm('确定要退出吗？')) {
					return;
				}
				this.$removeSessionStorage('user');
				this.user = {};
				this.isLogin = false;

				// 强制组件重新渲染
				this.$forceUpdate();

				this.$router.push('/userMenu');
			}
		},
	}
</script>

<style scoped>
	/****************总容器*********************/

	.wrapper {
		width: 100%;
		height: 100%;

	}

	/****************header*********************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #FFFFFF;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wrapper header .back {
		position: absolute;
		width: 2vw;
		height: 2vw;
		left: 1.5vw;
		top: 2.8vw;
		user-select: none;
		cursor: pointer;
	}

	.wrapper .cont {
		width: 100%;
		margin-top: 12vw;
		background-color: #EEEEEE;
	}

	/*userName*/
	.wrapper .cont .userName {
		width: 100%;
		display: flex;
		height: 18vw;


		align-items: center;
		background-color: #FFFFF3;
	}

	.wrapper .cont .unlogin {
		width: 100%;
		display: flex;
		height: 18vw;
		align-items: center;
		background-color: #FFFFF3;
	}

	.wrapper .cont .unlogin h3 {
		margin-left: 7.8vw;
		font-size: 5.6vw;
		color: #444444;
		font-weight: 500;
		user-select: none;
	}

	.wrapper .cont .userName img {
		width: 12vw;
		height: 12vw;
		margin: 0 1vw 0 3vw;
		border-radius: 45px;
	}

	.wrapper .cont .userName .nameP {
		margin-left: 4vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}

	.wrapper .cont .userName .nameP h3 {
		font-size: 4vw;
		color: #444444;
		font-weight: 500;
	}

	.wrapper .cont .userName .nameP p {
		font-size: 3.6vw;
		color: #777;
	}


/*********************************/
	.wrapper .cont .userinfo{
		border-radius: 5px;
		margin: 1vw 0.5vw 1vw 0.5vw;
		box-sizing: border-box;
		padding: 3.2vw;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;
	}
	.wrapper .cont .userinfo li{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		font-size: 3.6vw;
		color: #444444;
	}
	
	.wrapper .cont .userinfo li img{
		width: 8vw;
		height: 8vw;
		margin: 1vw 3vw 1vw 3vw;
	}
	
	
/***************myOrders*****************/

	.wrapper .cont .myOrders{
		width: 100%;
		
		box-sizing: border-box;
		border-radius: 5px;
		background-color: #fff;
		/* margin-top: 0.5vw; */
		border-bottom: solid 1px #ddd;
	}
	
	.wrapper .cont .myOrders p{
		width: 88%;
		margin: 0 auto;
		height: vw;
		background-color: #ffffff;
		margin-top: 1.3vw;
		border-radius: 5px;
		color: #333;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.wrapper .cont .myOrders p p2{
	width: 28%;
	box-sizing: border-box;
	padding: 1vw 3.5vw;
	color: #666;
	font-size: 3vw;
	
	display: flex;
	justify-content: space-between;
	margin-right: -3vw;
	}
	
	.wrapper .cont .myOrders p p2 i {
		font-size: 4vw;
	}
	
	.wrapper .cont .myOrders .icons{
		width: 100%;
		height: 23vw;
		
		display: flex;
		flex-wrap: wrap;
		/* flex-direction: column; */
		justify-content: space-between;
		align-content: center;
		
		box-sizing: border-box;
		padding: 2vw 2vw;
	}
	
	.wrapper .cont .myOrders .icons li{
		width: 18vw;
		height: 20vw;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* align-items: center; */
		align-items: center;
		
		user-select: none;
		cursor: pointer;
	}
	.wrapper .cont .myOrders .icons li img{
		width: 8vw;
		height: 8vw;
	}
	
	.wrapper .cont .myOrders .icons li p{
		font-size: 3.2vw;
		font-weight: 500;
		color: #666;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/*******myPayBag********/
	.wrapper .cont .myPayBag{
		width: 100%;
		
		box-sizing: border-box;
		border-radius: 5px;
		background-color: #fff;
		/* margin-top: 0.5vw; */
		border-bottom: solid 1px #ddd;
	}
	.wrapper .cont .myPayBag .title{
		width: 88%;
		margin: 0 auto;
		background-color: #ffffff;
		margin-top: 1.3vw;
		border-radius: 5px;
		color: #333;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .cont .myPayBag .payBagDT{
		width: 100%;
		height: 20vw;
		
		display: flex;
		flex-wrap: wrap;
		/* flex-direction: column; */
		justify-content: space-around;
		align-content: center;
		
		box-sizing: border-box;
		padding: 1vw;
	}
	.wrapper .cont .myPayBag .payBagDT li .shuju{
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.wrapper .cont .myPayBag .payBagDT li .shuju h3{
		font-size: 6.5vw;
	}
	.wrapper .cont .myPayBag .payBagDT li .shuju p{
		font-size: 3vw;
	}
	.wrapper .cont .myPayBag .payBagDT li p{
		font-size: 3.5vw;
	}
	
	.wrapper .userSet .userST{
		width: 100%;
		
		box-sizing: border-box;
		border-radius: 5px;
		background-color: #fff;
		margin-left: 1%;
		/* margin-top: 0.5vw; */
		border-bottom: solid 1px #ddd;
	}
	
	.wrapper .userSet .userST .tittle{
		width: 88%;
		margin: 0 auto;
		background-color: #ffffff;
		margin-top: 1.3vw;
		border-radius: 5px;
		color: #333;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wrapper .userSet .userSTDT{
		width: 100%;
		height: 20vw;
		
		display: flex;
		flex-wrap: wrap;
		/* flex-direction: column; */
		justify-content: space-around;
		align-content: center;
		
		box-sizing: border-box;
		padding: 1vw;
	}
	.wrapper .userSet .userSTDT li{
		width: 18vw;
		height: 20vw;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		
		user-select: none;
		cursor: pointer;
	}
	.wrapper .userSet .userSTDT li img{
		height: 9vw;
		width: 9vw;
	}
	.wrapper .userSet .userSTDT li p{
		font-size: 3.2vw;
		font-weight: 500;
		color: #666;
	}
	
</style>
